import React 					from 'react';
import PageTitle    	from 'component/pagetitle/index.jsx';
import CategorySelect	from './category-selector.jsx';
import Util						from 'util/mm.jsx';
import Product				from 'service/product-service.jsx';

const _mm 			= new Util();
const _product 	= new Product();

class ProductSave extends React.Component{
	constructor(props){
		super(props);
		this.state = {
			id							: this.props.match.params.pid,
			categoryId			: 0,
			parentCategoryId: 0,
			name						: '',
			subtitle				: '',
			subImages				: [],
			detail					: '',
			price						: '',
			stock						: '',
			status					: 1
		}
	}
	componentDidMount(){
		if(this.state.id){
			this.loadProduct();
		}
	}
	//查看商品详情进行回填
	loadProduct(){
		_product.getProduct(this.state.id)
						.then(res => {
							let images = res.subImages.split(',');
							res.subImages = images.map(imgUri => {
								return {
									uri:imgUri,
									url:res.imageHost + imgUri
								}
							})
							res.defaultDetail = res.detail;
							this.setState(res);
						},errMsg => {
							_mm.errorTips(errMsg);
						});
	}
	
	
	
	
	render(){
		return (
			<div id="page-wrapper">
				<PageTitle title='添加商品' />
				<div className="form-horizontal">
				  <div className="form-group">
					<label  className="col-md-2 control-label">商品名称</label>
					<div className="col-md-5">
						<p className="form-control-static">{this.state.name}</p>
					</div>
				  </div>
				  <div className="form-group">
					<label  className="col-md-2 control-label">商品描述</label>
					<div className="col-md-5">
					  <p className="form-control-static">{this.state.subtitle}</p>
					</div>
				  </div>
				  <div className="form-group cate-select-wrapper">
					 <label  className="col-md-2 control-label">所属分类</label>
					 <CategorySelect 			categoryId={this.state.categoryId}
																parentCategoryId={this.state.parentCategoryId}
																readOnly />
				  </div>
				  <div className="form-group">
					  <label  className="col-md-2 control-label">商品价格</label>
					  <div className="col-md-3 input-group">
						<input type="number" className="form-control" 
																 value={this.state.price}
																	readOnly />
						<span className="input-group-addon" >元</span>
					  </div>
				  </div>
				  <div className="form-group">
				  	<label  className="col-md-2 control-label">商品库存</label>
				  	<div className="col-md-3 input-group">
						<input type="number" className="form-control"  
																 value={this.state.stock}
																 readOnly />
						<span className="input-group-addon" >件</span>
				  	</div>
				  </div>
				  <div className="form-group">
					  <label  className="col-md-2 control-label upload-label">商品图片</label>
						<div className="col-md-10">
						{
							this.state.subImages.length > 0
							? this.state.subImages.map((image,index) => {
									return (
										<div key={index} className="upload-image-wrapper">
												<img src={image.url} />
										</div>
									
									)
								})
								
							:	<span className="upload-tips">暂无图片</span>
						}
						</div>
				  </div>
					<div className="form-group">
						<label  className="col-md-2 control-label">商品详情</label>
						<div className="col-md-10" dangerouslySetInnerHTML={{__html: this.state.detail}} ></div>
					</div>
				</div>
				
			</div>
		)
	}
}

export default ProductSave;
